<template>
  <div class="home">
    <!-- <nav-header /> -->
    <!-- 导航部分 -->
    <nav class="blog-nav layui-header">
      <div class="blog-container">
        <a class="blog-logo" href="">梦中程序员</a>
        <ul class="layui-nav" lay-filter="nav">
          <li class="layui-nav-item layui-this">
            <a @click="toHome"
              ><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAricle"
              ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
            >
          </li>
          <li class="layui-nav-item">
            <a @click="toAbout"
              ><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a
            >
          </li>
          <li class="layui-nav-item" style="margin-left:100px">
            <i class="fa fa-user fa-fw"></i>&nbsp;
            <el-dropdown>
              <span class="el-dropdown-link">
                {{realName}}<i class="el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="toManagement">管理页面</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout">退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
        <a class="blog-navicon" href="javascript:;">
          <i class="fa fa-navicon"></i>
        </a>
      </div>
    </nav>

    <!-- 手机导航 -->
    <ul
      class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
      lay-filter="nav"
    >
      <li class="layui-nav-item layui-this">
        <a @click="toHome"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
      </li>
      <li class="layui-nav-item">
        <a @click="toAricle"
          ><i class="fa fa-file-text fa-fw"></i>&nbsp;文章分类</a
        >
      </li>
      <li class="layui-nav-item">
        <a @click="toAbout"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
      </li>
    </ul>
    <div class="blog-body">
      <canvas id="canvas-banner" style="background: #393d49"></canvas>
      <div class="blog-container">
        <div class="blog-main">
          <!-- 网站公告提示 -->
          <div class="home-tips shadow">
            <i
              style="float: left; line-height: 17px"
              class="fa fa-volume-up"
            ></i>
            <div class="home-tips-container">
              <span style="color: #009688"
                >偷偷告诉大家，本博客的后台管理也正在制作，为大家准备了游客专用账号！</span
              >
            </div>
          </div>
          <!--左边文章列表-->
          <div class="blog-main-left">
            <div class="article shadow">
              <div class="article-left">
                <img
                  src="@/assets/images/2.png"
                  alt="基于laypage的layui扩展模块（pagesize.js）！"
                />
              </div>
              <div class="article-right">
                <div class="article-title">
                  <a @click="toDetail"
                    >基于laypage的layui扩展模块（pagesize.js）！</a
                  >
                </div>
                <div class="article-abstract">
                  该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法！
                </div>
              </div>
              <div class="clear"></div>
              <div class="article-footer">
                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;2017-03-18</span>
                <span class="article-author"
                  ><i class="fa fa-user"></i>&nbsp;&nbsp;Absolutely</span
                >
                <span
                  ><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#"
                    >Web前端</a
                  ></span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-eye"></i>&nbsp;0</span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-commenting"></i>&nbsp;4</span
                >
              </div>
            </div>
            <div class="article shadow">
              <div class="article-left">
                <img
                  src="@/assets/images/2.png"
                  alt="基于laypage的layui扩展模块（pagesize.js）！"
                />
              </div>
              <div class="article-right">
                <div class="article-title">
                  <a href="detail.html"
                    >基于laypage的layui扩展模块（pagesize.js）！</a
                  >
                </div>
                <div class="article-abstract">
                  该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法！
                </div>
              </div>
              <div class="clear"></div>
              <div class="article-footer">
                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;2017-03-18</span>
                <span class="article-author"
                  ><i class="fa fa-user"></i>&nbsp;&nbsp;Absolutely</span
                >
                <span
                  ><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#"
                    >Web前端</a
                  ></span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-eye"></i>&nbsp;0</span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-commenting"></i>&nbsp;4</span
                >
              </div>
            </div>
            <div class="article shadow">
              <div class="article-left">
                <img
                  src="@/assets/images/2.png"
                  alt="基于laypage的layui扩展模块（pagesize.js）！"
                />
              </div>
              <div class="article-right">
                <div class="article-title">
                  <a href="detail.html"
                    >基于laypage的layui扩展模块（pagesize.js）！</a
                  >
                </div>
                <div class="article-abstract">
                  该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法！
                </div>
              </div>
              <div class="clear"></div>
              <div class="article-footer">
                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;2017-03-18</span>
                <span class="article-author"
                  ><i class="fa fa-user"></i>&nbsp;&nbsp;Absolutely</span
                >
                <span
                  ><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#"
                    >Web前端</a
                  ></span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-eye"></i>&nbsp;0</span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-commenting"></i>&nbsp;4</span
                >
              </div>
            </div>
            <div class="article shadow">
              <div class="article-left">
                <img
                  src="@/assets/images/2.png"
                  alt="基于laypage的layui扩展模块（pagesize.js）！"
                />
              </div>
              <div class="article-right">
                <div class="article-title">
                  <a href="detail.html"
                    >基于laypage的layui扩展模块（pagesize.js）！</a
                  >
                </div>
                <div class="article-abstract">
                  该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法！
                </div>
              </div>
              <div class="clear"></div>
              <div class="article-footer">
                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;2017-03-18</span>
                <span class="article-author"
                  ><i class="fa fa-user"></i>&nbsp;&nbsp;Absolutely</span
                >
                <span
                  ><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#"
                    >Web前端</a
                  ></span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-eye"></i>&nbsp;0</span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-commenting"></i>&nbsp;4</span
                >
              </div>
            </div>
            <div class="article shadow">
              <div class="article-left">
                <img
                  src="@/assets/images/2.png"
                  alt="基于laypage的layui扩展模块（pagesize.js）！"
                />
              </div>
              <div class="article-right">
                <div class="article-title">
                  <a href="detail.html"
                    >基于laypage的layui扩展模块（pagesize.js）！</a
                  >
                </div>
                <div class="article-abstract">
                  该模块主要是针对当前版本laypage没有页容量控制功能而制作，使用该模块后即可实现每页显示多少条数据的控制！本人原创，但是可能有可能只对本人的分页写法！
                </div>
              </div>
              <div class="clear"></div>
              <div class="article-footer">
                <span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;2017-03-18</span>
                <span class="article-author"
                  ><i class="fa fa-user"></i>&nbsp;&nbsp;Absolutely</span
                >
                <span
                  ><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="#"
                    >Web前端</a
                  ></span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-eye"></i>&nbsp;0</span
                >
                <span class="article-viewinfo"
                  ><i class="fa fa-commenting"></i>&nbsp;4</span
                >
              </div>
            </div>
          </div>
          <!--右边小栏目-->
          <div class="blog-main-right">
            <div class="blogerinfo shadow">
              <div class="blogerinfo-figure">
                <img
                  src="@/assets/images/profile.jpg"
                  alt="Leruge"
                  width="100"
                  height="100"
                />
              </div>
              <p class="blogerinfo-nickname">Leruge</p>
              <p class="blogerinfo-introduce">学历只是过去，学习决定未来。</p>
              <p class="blogerinfo-location">
                <i class="fa fa-location-arrow"></i>&nbsp;河南 - 安阳
              </p>
              <hr />
            </div>
            <div class="blog-module shadow">
              <div class="blog-module-title">热文排行</div>
              <ul class="fa-ul blog-module-ul">
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">在git上搭建hexo博客教程</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用CSRF防跨站请求伪造</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用场景验证</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用消息队列扩展教程</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">浅谈ThinkPHP使用数据迁移工具</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用分表功能</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">ThinkPHP使用邮箱扩展发送邮件</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
                <li>
                  <i class="fa-li fa fa-hand-o-right"></i
                  ><a href="detail.html">文件分片多线程上传案列</a>
                </li>
              </ul>
            </div>
            <div class="blog-module shadow">
              <div class="blog-module-title">友情链接</div>
              <ul class="blogroll">
                <li><a target="_blank" href="" title="Layui">梦中程序员</a></li>
                <li><a target="_blank" href="" title="页签">赏金俱乐部</a></li>
              </ul>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <footer class="blog-footer">
      <p>
        <span>Copyright</span><span>&copy;</span><span>2019</span
        ><a href="">梦中程序员</a>
      </p>
      <p>
        <a href="http://www.miibeian.gov.cn/" target="_blank"
          >京ICP备18053420号-1</a
        >
      </p>
    </footer>

    <div class="blog-share layui-hide">
      <div class="blog-share-body">
        <div style="width: 200px; height: 100%">
          <div class="bdsharebuttonbox">
            <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
            <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
            <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
          </div>
        </div>
      </div>
    </div>

    <div class="blog-mask animated layui-hide"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import NavHeader from "@/components/NavHeader.vue";

// var canvas = document.getElementById('canvas-banner');
//         canvas.width = window.document.body.clientWidth - 10;//减去滚动条的宽度
//         if (screen.width >= 992) {
//             canvas.height = window.innerHeight * 1 / 3;
//         } else {
//             canvas.height = window.innerHeight * 2 / 7;
//         }
export default {
  name: "Home",
  components: {
    NavHeader,
  },
  data(){
    return{
        realName: sessionStorage.getItem("realName")
    }
  },
  methods: {
    toDetail() {
      this.$router.push("/detail");
    },
    toAricle() {
      this.$router.push("/article");
    },
    toHome() {
      this.$router.push("/");
    },
    toAbout() {
      this.$router.push("/about");
    },
    toManagement(){
        console.log(111);
        this.$router.push("/layout")
    },
    logout(){
        sessionStorage.clear()
        this.$router.push("/login")
    }
  },
  mounted() {
    let script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/lib/layui/layui.js";
    document.body.appendChild(script);

    let script2 = document.createElement("script");
    script2.type = "text/javascript";
    script2.src = "/js/global.js";
    document.body.appendChild(script2);

    let script3 = document.createElement("script");
    script3.type = "text/javascript";
    script3.src = "/js/home.js";
    document.body.appendChild(script3);
  },
  created(){
    if(!sessionStorage.getItem("realName")){
        this.$router.push("/login")
        this.$message({
        message: "请登录",
        type: "warning",
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "/lib/layui/css/layui.css";
@import "/lib/font-awesome/css/font-awesome.min.css";
@import "../assets/css/global.css";
@import "../assets/css/home.css";

a {
  cursor: pointer;
}
</style>